<script setup>
import { ref, onMounted } from "vue";
import { getArtColumn } from "@/api/navTab";
const route = useRoute();
const config = useRuntimeConfig()
// 数据
let navTab = ref([])
// 选项卡索引
let navTabIndex = ref(-1)
// 请求数据
const { data, pending, error, refresh } = await useFetch(config.public.baseURL + '/navTab/list')
navTab.value = data.value.data

 onMounted(() => {
    if(route.fullPath != '/'){
        navTabIndex.value = navTab.value.findIndex(item=> item.id == route.params.id)
        navigateTo(route.fullPath)
        return;
    }
    navTabIndex.value = 0
    navigateTo(`/art/list/${navTab.value[0].id}`)
 })

// 切换选项卡
const changeIndex = (index)=>{
    navTabIndex.value = index
    navigateTo(`/art/list/${navTab.value[index].id}`)
}
</script>

<template>
    <div class="header-box">
        <span :class="{'active': navTabIndex === index}" v-for="(item, index) in navTab" :key="item.id" @click="changeIndex(index)">{{ item.name }}</span>
    </div>
</template>

<style lang="scss" scoped>
.header-box{
    width: 1200px;
    height: 60px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    span{
        margin-right: 30px;
        cursor: pointer;
        padding: 5px 15px;
        border-radius: 4px;
        &.active{
            background-color: rgba(#409eff, 0.7);
            color: #fff;
        }
    }
}
</style>